<template>
  <div>
    <div id="app" style="height: 600px"></div>
    <div class="control">
      <button @click="showSatellite">显示高德本身卫星地图</button>
      <button @click="hideSatellite">隐藏高德本身卫星地图</button>
      <button @click="createGaode">创建自定义高德卫星地图</button>
      <button @click="destroyGaode">销毁自定义高德卫星地图</button>
      <button @click="showGaode">显示自定义高德卫星地图</button>
      <button @click="hideGaode">隐藏自定义高德卫星地图</button>
      <button @click="createTianditu">创建天地图卫星地图</button>
      <button @click="destroyTianditu">销毁天地图卫星地图</button>
      <button @click="createBaidu">创建百度卫星地图</button>
      <button @click="destroyBaidu">销毁百度卫星地图</button>
      <button @click="hideBaiduLayer">隐藏百度卫星地图</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      satellite: null,
      gaodeLayer: null,
      tiandituLayer: null,
      baiduLayer: null,
      layers: [],
      maskArea: [],
      altitude: 10000,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const center = [116.335036, 39.900082];
      const district = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "city",
      });

      district.search("北京市", (status, result) => {
        const bounds = result.districtList[0].boundaries;
        for (let i = 0; i < bounds.length; i++) {
          this.maskArea.push([bounds[i].map((item) => item.toArray())]);
        }

        this.map = new AMap.Map("app", {
          center,
          zoom: 8,
          viewMode: "3D",
          features: [],
          pitch: 60,
          showBuildingBlock: false,
          mask: this.maskArea,
        });

        this.satellite = new AMap.TileLayer.Satellite();
        this.map.addLayer(this.satellite);
        this.layers.push(this.satellite);

        this.hideSatellite();
        this.createLoca();
        this.createGaode();
      });
    },
    createLoca() {
      const loca = new Loca.Container({ map: this.map });
      loca.addLight(new Loca.AmbientLight({ intensity: 0.6, color: "#fff" }));

      const geo = new Loca.GeoJSONSource({
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "MultiPolygon",
                coordinates: this.maskArea,
              },
            },
          ],
        },
      });

      const pl = new Loca.PolygonLayer({
        zIndex: 110,
        cullface: "none",
        shininess: 1,
        hasBottom: false,
        blockHide: false,
        hasSide: true,
        hasTop: false,
        depth: true,
      });

      pl.setSource(geo);
      pl.setStyle({
        height: this.altitude,
        topColor: () => "rgba(255,255,255,0)",
        sideTopColor: () => "rgba(0,255,255,0.4)",
        sideBottomColor: () => "#00C6DA",
      });

      loca.add(pl);
    },
    createGaode() {
      this.gaodeLayer = new AMap.CustomXyzLayer(this.map, {
        url: "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        subdomains: ["1", "2", "3", "4"],
        zooms: [2, 20],
        debug: false,
        mask: this.maskArea,
        altitude: this.altitude,
      });
      this.layers.push(this.gaodeLayer);
    },
    destroyGaode() {
      this.gaodeLayer?.destroy();
      this.removeLayer(this.gaodeLayer);
      this.gaodeLayer = null;
    },
    showGaode() {
      this.gaodeLayer?.show();
    },
    hideGaode() {
      this.gaodeLayer?.hide();
    },
    createTianditu() {
      this.tiandituLayer = new AMap.CustomXyzLayer(this.map, {
        url:
          "http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=99099e39a3d3c7fa12e0f84110ed1205",
        subdomains: ["1", "2", "3", "4"],
        proj: "wgs84",
      });
      this.layers.push(this.tiandituLayer);
    },
    destroyTianditu() {
      this.tiandituLayer?.destroy();
      this.removeLayer(this.tiandituLayer);
      this.tiandituLayer = null;
    },
    createBaidu() {
      this.baiduLayer = new AMap.CustomXyzLayer(this.map, {
        url:
          "https://maponline{s}.bdimg.com/starpic/?qt=satepc&u=x={x};y={y};z={z};v=009;type=sate&fm=46",
        subdomains: ["1", "2", "3"],
        proj: "bd09",
        tileType: "bd09",
      });
      this.layers.push(this.baiduLayer);
    },
    destroyBaidu() {
      this.baiduLayer?.destroy();
      this.removeLayer(this.baiduLayer);
      this.baiduLayer = null;
    },
    hideBaiduLayer() {
      this.baiduLayer?.hide();
    },
    showSatellite() {
      this.hideAllLayers();
      this.satellite?.show();
    },
    hideSatellite() {
      this.satellite?.hide();
    },
    hideAllLayers() {
      this.layers.forEach((layer) => layer.hide?.());
    },
    removeLayer(layer) {
      const index = this.layers.findIndex((l) => l === layer);
      if (index > -1) this.layers.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.control {
  margin-top: 10px;
}
.control button {
  margin-right: 10px;
}
</style>
